<template>
  <el-card class="box">
    <div id="my-three-line"></div>
  </el-card>
</template>

<script setup>
  import * as THREE from "three";
  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

  //创建一个三维场景
  const scene = new THREE.Scene();
  const width = window.innerWidth;
  const height = window.innerHeight;

  // 相机
  const camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    500
  );
  camera.position.set(0, 0, 100);
  camera.lookAt(0, 0, 0);
  // 基础线条
  const material = new THREE.LineBasicMaterial({
    color: 0x0000ff,
    linewidth: 1,
  });
  const points = []; //点集合
  points.push(new THREE.Vector3(10, 0, 0));
  points.push(new THREE.Vector3(0, 10, 0));
  points.push(new THREE.Vector3(10, 0, 0));
  points.push(new THREE.Vector3(0, 0, 10));
  points.push(new THREE.Vector3(0, -10, 0)); //Vector3( x : Float, y : Float, z : Float )
  points.push(new THREE.Vector3(-10, 0, 0));
  points.push(new THREE.Vector3(0, -10, 0));
  points.push(new THREE.Vector3(-10, 0, 0));
  points.push(new THREE.Vector3(0, 0, -10));
  points.push(new THREE.Vector3(0, 10, 0)); //Vector3( x : Float, y : Float, z : Float )

  // 创建面片
  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  const line = new THREE.Line(geometry, material);

  scene.add(line);

  /* 创建一个WebGL渲染器 */
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height); //设置渲染区尺寸
  renderer.render(scene, camera); //执行渲染操作、指定场景、相机作为参数

  const controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
  controls.addEventListener("change", () => {
    renderer.render(scene, camera); //监听鼠标，键盘事件
  });

  onMounted(() => {
    document.getElementById("my-three-line")?.appendChild(renderer.domElement);
  });
</script>

<style lang="scss" scoped>
  .box {
    width: 100%;
    height: 100%;
  }
</style>
